<!DOCTYPE html>
<!--办公安全分委会积分考核-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

</head>

<body>
    
<div id="app" v-cloak>   
        <div class="head-tool">
            <p>当前第 {{i}} 题，共计 {{question.name.length}} 题。</p>
            <ul>
                <li v-for="i in this.question.name.length">
                    <h2>{{i}}、{{question.name[i-1].value}}</h2>
                    <p>
                        <el-checkbox :label="question.items.a[i-1].value"></el-checkbox>
                    </p>
                    <p>
                        <el-checkbox :label="question.items.b[i-1].value"></el-checkbox>
                    </p>
                    <p>
                        <el-checkbox :label="question.items.c[i-1].value"></el-checkbox>
                    </p>
                </li>
            </ul>
            <el-button type="primary" @click="clickReduce" size="mini">上一题</el-button>
            <el-button type="primary" @click="clickAdd" size="mini">下一题</el-button>
        </div>
        <el-row type="flex" justify="end">
            <el-button type="primary" @click="onSubmitForm('ruleForm')">交卷</el-button>
            <el-button type="primary" @click="onSubmitForm('ruleForm')">保存当前进度并退出</el-button>
        </el-row>
    </div>
    <script type="text/javascript">
        app = new Vue({
            el: '#app',
            data: function () {
                return {
                    seen: false,
                    ListItem: ListItem,
                    question: {
                        name: [],
                        items: {
                            a: '',
                            b: "",
                            c: "",
                        },
                    },
                    i: 1,
                }
            },
            updated: function () {
                this.getFirstData()
            },
            mounted: function () {
                this.question.name = getDicData('n85');
                this.question.items.a = getDicData('n86');
                this.question.items.b = getDicData('n87');
                this.question.items.c = getDicData('n88');
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            onSubmitForm(this, '/api/User/Save', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                clickAdd: function () {
                    this.i += 1
                    var nameLe = this.question.name.length;
                    $("li").hide();
                    $('li:eq(' + this.i + ')').show();
                    if (this.i >= nameLe) {
                        this.$message({
                            message: '来到最后一题',
                            type: 'warning'
                        });
                        this.i = nameLe;
                    };
                    this.i = question.name.length
                },
                clickReduce: function () {
                    this.i -= 1
                    $("li").hide();
                    $('li:eq(' + this.i + ')').show();
                    if (this.i <= 1) {
                        this.$message({
                            message: '回到第一题',
                            type: 'warning'
                        });
                        this.i = 1
                    };
                },
                getFirstData: function () {
                    $("li").hide();
                    var i = this.i - 1
                    $('li:eq(' + i + ')').show();
                },
                closeDialog: function () { closeDialog(this); },
            }
        });
    </script>

</body>

</html>